<template>
	<view class="mine">
		<view class="header">
			<view class="icon" @click="gotoSetting">
				<u-icon name="list-dot" color="#ffffff" size="80"></u-icon>
			</view>
			<!-- 用户头像信息 -->
			<view class="avatar" @click="gotoLogin">
				<view>
					<u-avatar :src="src" size="150"></u-avatar>
				</view>
				<view class="info">
					<!-- 用户名 -->
					<view class="name">
						{{user.username}}
					</view>
					<!-- 手机号 -->
					<view class="phone">
						{{user.iphone}}
					</view>
				</view>
			</view>
		</view>
		<!-- 快捷菜单入口 -->
		<view class="menu">
			<!-- 付款记录 -->
			<view class="paymentHistory laout" @click="gotoBooking">
				<!-- 图标 -->
				<image src="../../static/image/mine/clock.png" mode=""></image>
				<text>预约记录</text>
			</view>
			<view class="usageRecord laout" @click="gotoUsage">
				<image src="../../static/image/mine/car.png" mode=""></image>
				<text>使用记录</text>
			</view>

		</view>
		<!-- 快捷查询 -->
		<view class="search">
			<view class="left">
				<view class="left__top">
					<!-- 违约记录 -->
					<view class="defaultRecord laout" @click="gotooverdueHistory">
						<!-- 图标 -->
						<image src="../../static/image/mine/date.png" mode=""></image>
						<text>违约记录</text>
					</view>
					<!-- 账户余额 -->
					<view class="balance laout" @click="gotobalance">
						<!-- 图标 -->
						<image src="../../static/image/mine/package.png" mode=""></image>
						<text>账户余额</text>
					</view>
				</view>
				<!-- 我的爱车 -->
				<view class="myCar laout" @click="gotomyCar">
					<image src="../../static/image/mine/heart.png" mode=""></image>
					<text>我的爱车</text>
				</view>
			</view>
			<view class="right">
				<!-- 专用车位 -->
				<view class="stall laout" @click="gotoStallVip">
					<image src="../../static/image/mine/car-fill.png" mode=""></image>
					<text>专属车位</text>
				</view>
				<!-- 问题与反馈 -->
				<view class="service laout" @click="gotoService">
					<image src="../../static/image/mine/buld.png" mode=""></image>
					<text>问题与反馈</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '../../static/image/logo.png',
				user: {
					text: '无头像',
					username: "未登录",
					iphone: "未登录"
				}

			}
		},
		methods: {
			gotoSetting() {
				this.$u.route('/pages/setting/setting')
			},
			// 跳转到车辆我的爱车页面
			gotomyCar() {
				this.$u.route('/pages/car/myCar')
			},
			// 跳转到专属车位页面
			gotoStallVip() {
				this.$u.route('/pages/stall/stallVip')
			},
			// 跳转到使用记录
			gotoUsage() {
				this.$u.route('/pages/history/usageHistory')
			},
			gotoBooking() {
				this.$u.route('/pages/history/bookingHistory')
			},
			// 跳转到登录
			gotoLogin() {
				if (!this.vuex_token) {
					this.$u.route('/pages/public/loginRegister')
				}
				// else {
				// 	this.$u.route('/pages/setting/userInfo')
				// }
			},
			gotoService() {
				this.$u.route('/pages/mine/service')
			},
			gotooverdueHistory() {
				this.$u.route('/pages/history/overdueHistory')
			},
			gotobalance() {
				this.$u.route('/pages/mine/balance/balance')
			}
		},
		onShow() {
			if (uni.getStorageSync('username')) {
				this.user.username = uni.getStorageSync('username')
			} else {
				this.user.username = '未登录'
			}
			if (uni.getStorageSync('iphone')) {
				let iphone = uni.getStorageSync('iphone')
				this.user.iphone = iphone.replace(iphone.slice(3, 7), '****')
			} else {
				this.user.iphone = ''
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $page-color;
	}

	.mine {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 1200rpx;

		// padding-top: 100rpx;
		.header {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 600rpx;
			width: 100%;
			background-color: $base-color;
			// border-radius: 0 0 100% 100% / 0 0 15% 15%;

			.icon {
				height: 64rpx;
				// display: flex;
				// justify-content: flex-end;
				margin-left: 600rpx;
				padding-bottom: 100rpx;

			}

			.avatar {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 190rpx;
				// padding-top: 60rpx;
				padding-bottom: 60rpx;

				.info {
					margin-left: 30rpx;
					color: #FFFFFF;

					.name {
						font-size: 40rpx;
					}

					.phone {
						margin-top: 14rpx;
					}
				}
			}
		}

		.menu {
			// background-color: #19BE6B;
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 290rpx;
			width: 90%;
			margin-top: -80rpx;
			margin-bottom: 40rpx;
			background-color: #FFFFFF;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			.laout {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				text {
					font-size: 32rpx;
					margin-top: 6rpx;
				}
			}
		}

		.search {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 90%;
			height: 750rpx;
			// background-color: #19BE6B;
			background-color: #FFFFFF;
			color: #FFFFFF;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			.laout {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 50rpx;
			}

			.left {
				flex: 2;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				// padding-right: 20rpx;

				&__top {
					display: flex;
					// justify-content: space-around;
					align-items: center;
					height: 100%;
					width: 100%;

					.defaultRecord {
						width: 190rpx;
						height: 190rpx;
						background-color: #aa92ce;
						margin: 0 20rpx;
					}

					.balance {
						width: 190rpx;
						height: 190rpx;
						background-color: #f29952;
					}
				}

				.myCar {
					width: 400rpx;
					height: 190rpx;
					background-color: #50bec1;
					margin-top: 30rpx;
				}
			}

			.right {
				flex: 1;
				display: flex;
				flex-flow: column wrap;
				justify-content: space-between;
				align-content: center;
				margin-right: 20rpx;

				.stall {
					width: 220rpx;
					height: 150rpx;
					// margin-top: -50rpx;
					// margin-top: 35rpx;
					background-color: #5383c3;
				}

				.service {
					width: 220rpx;
					height: 250rpx;
					margin-top: 20rpx;
					background-color: #eb6d71;
				}
			}
		}
	}
</style>
